<template>
  <div ref="chartDom"></div>
</template>

<script>
import echarts from "echarts";
import debounce from "lodash/debounce";
import { addListener, removeListener } from "resize-detector";
export default {
  props: {
    option: {
      type: Object,
      default: () => {},
    }
  },
  watch:{
    option:{
      handler(val)
      {
         this.charts.setOption(val)  
      },
      deep:true
    }
  },
  created() {
    this.resize = debounce(this.resize, 300);
  },
  mounted() {
    this.renderChart();
    addListener(this.$refs.chartDom, this.resize);
    // 指定图表的配置项和数据
   
  },
  beforeDestroy() { 
    removeListener(this.$refs.chartDom, this.resize);
    this.charts.dispose();
    this.charts = null;
  },
  methods: {
    resize() {
      console.log("resize");
      this.charts.resize();
    },
    renderChart() {
      this.charts = echarts.init(this.$refs.chartDom);
      this.charts.setOption(this.option);
    },
  },
};
</script>

<style>
</style>